<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import HeaderTitle from '../common/HeaderTitle.vue'
import { CirclePlus } from '@element-plus/icons-vue'

export type MilestoneType = {
  id: string
  createTime: string
  number: string
  releaseTime: string
}
defineProps<{
  dataSource?: MilestoneType[]
}>()
const emits = defineEmits(['addMilestoneNode'])
</script>

<template>
  <div class="milestone-list">
    <header-title title="里程碑节点" class="mb-20">
      <el-button
        type="primary"
        :icon="CirclePlus"
        @click="emits('addMilestoneNode')"
        >新增里程碑节点
      </el-button>
    </header-title>
    <el-timeline
      v-if="dataSource && dataSource.length > 0"
      style="max-width: 600px"
    >
      <el-timeline-item
        v-for="item in dataSource"
        :key="item.id"
        :timestamp="item.releaseTime"
        placement="top"
      >
        <el-card class="version-node">
          <h4 class="version-number">版本号：{{ item.number }}</h4>
          <p class="version-time">创建时间： {{ item.createTime }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-empty v-else description="暂无里程碑节点" />
  </div>
</template>

<style scoped lang="scss">
.mb-20 {
  margin-bottom: 20px;
}

.version-node {
  .version-number {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .version-time {
    font-size: 14px;
  }
}
</style>
